<template>
  <!-- 表单 -->
  <view class="form">
    <!-- 表单内容 -->
    <view class="form-content">
      <view class="form-item" @click="handleTap">
        <text class="label" style="color: red">*</text>
        <text class="label">危废行业俗称:</text>
        <text class="iptClass">{{
          memberStore.RegisterObjViewing.wfTypeName
        }}</text>
      </view>
      <view class="form-item" @click="handleDep">
        <text class="label">所属部门:</text>
        <text class="iptClass">{{
          memberStore.RegisterObjViewing.deptName
        }}</text>
      </view>
      <!-- <view class="form-item">
        <text class="label" style="color: red">*</text>
        <text class="label">危险废物名称</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfName"
          :disabled="!isEdit"
        />
      </view> -->
      <view class="form-item">
        <text class="label" style="width: 300rpx">国家危险废物名录名称:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfCountryName"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item">
        <text class="label">产生批次编码:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfCreateCode"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item" @click="handledate">
        <text class="label" style="color: red">*</text>
        <text class="label">产生时间:</text>
        <text class="iptClass">{{
          memberStore.RegisterObjViewing.produceTime
        }}</text>
      </view>
      <view class="form-item">
        <text class="label">产生量:</text>
        <input
          class="iptClass"
          type="number"
          v-model.trim="memberStore.RegisterObjViewing.wfWeight"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item">
        <text class="label">单位:</text>
        <radio-group @change="onGenderChange">
          <label class="radio">
            <radio
              value="L"
              color="#27ba9b"
              :checked="memberStore.RegisterObjViewing?.wfUnit === 'L'"
              :disabled="!isEdit"
            />
            L
          </label>
          <label class="radio">
            <radio
              value="kg"
              color="#27ba9b"
              :checked="memberStore.RegisterObjViewing?.wfUnit === 'kg'"
              :disabled="!isEdit"
            />
            kg
          </label>
          <label class="radio">
            <radio
              value="吨"
              color="#27ba9b"
              :checked="memberStore.RegisterObjViewing?.wfUnit === '吨'"
              :disabled="!isEdit"
            />
            吨
          </label>
        </radio-group>
      </view>
      <view class="form-item">
        <text class="label">容器/包装编码:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfContainerCode"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item">
        <text class="label" style="color: red">*</text>
        <text class="label">容器/包装类型:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfContainerType"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item">
        <text class="label" style="color: red">*</text>
        <text class="label">容器/包装数量:</text>
        <input
          class="iptClass"
          type="number"
          v-model.trim="memberStore.RegisterObjViewing.wfContainerCount"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item">
        <text class="label" style="width: 290rpx">产生危险废物设施编码:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfFromDeviceCode"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item">
        <text class="label" style="color: red">*</text>
        <text class="label">去向:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfTo"
          :disabled="!isEdit"
        />
      </view>
      <ImageLogic
        :picturesPath="picturesPath"
        :isHide="memberStore.RegisterObjViewing.wfStatus == 3"
      ></ImageLogic>
      <view class="form-item">
        <text class="label">备注:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.RegisterObjViewing.wfRemark"
          :disabled="!isEdit"
        />
      </view>
      <view class="form-item">
        <text class="label">登记人:</text>
        <input
          class="iptClass"
          type="text"
          v-model.trim="memberStore.userName"
          disabled
        />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="dengjiClass" v-if="isEdit">
      <button
        @tap="handleSaveSure"
        :disabled="memberStore.boleanDisabled"
        :loading="memberStore.boleanDisabled"
        class="commonClass"
      >
        保 存
      </button>
    </view>
    <view class="popupClass">
      <l-popup :radius="20" :show="popupShow">
        <WasteCategories
          v-if="popupShow && componentName == 'WasteCategories'"
          :wfType="`${memberStore.RegisterObjViewing.wfType}`"
          @close="close"
        ></WasteCategories>
        <depLists
          v-if="popupShow && componentName == 'depLists'"
          @close="close"
          :deptId="memberStore.RegisterObjViewing.wfDeptId"
        ></depLists>
      </l-popup>
    </view>
  </view>
</template>

<script setup>
import { wfRegisterUpdate } from "./index";
import { useMemberStore } from "@/stores/modules/member";
const memberStore = useMemberStore();
const picturesPath = ref([]);
const isEdit = computed(() => memberStore.RegisterObjViewing.wfStatus == 1);
const popupShow = ref(false);
const componentName = ref("");
const handleTap = () => {
  if (isEdit.value) {
    popupShow.value = true;
    componentName.value = "WasteCategories";
  }
};
const handleDep = () => {
  if (isEdit.value) {
    if (memberStore.deptMap.length > 1) {
      popupShow.value = true;
      componentName.value = "depLists";
    }
  }
};
const close = () => {
  popupShow.value = false;
  if (componentName.value == "WasteCategories") {
    memberStore.RegisterObjViewing.wfTypeName =
      memberStore.typeAndDep.wfTypeName;
    memberStore.RegisterObjViewing.wfType = memberStore.typeAndDep.id;
  } else {
    memberStore.RegisterObjViewing.wfDeptId = memberStore.typeAndDep.deptId;
    memberStore.RegisterObjViewing.deptName = memberStore.typeAndDep.name;
  }
};
onLoad(() => {
  memberStore.typeAndDep = {};
  if (memberStore.RegisterObjViewing.wfPicture) {
    picturesPath.value = JSON.parse(memberStore.RegisterObjViewing.wfPicture);
  }
  const obj = memberStore.deptMap.find(
    (item) => item.deptId == memberStore.RegisterObjViewing.wfDeptId
  );
  if (obj) {
    memberStore.RegisterObjViewing.deptName = obj.name;
  }
});
const handledate = () => {
  if (isEdit.value) {
    dd.datePicker({
      format: "yyyy-MM-dd",
      currentDate: "",
      success: (res) => {
        memberStore.RegisterObjViewing.produceTime = res.date.replaceAll(
          "/",
          "-"
        );
      },
      fail: (err) => {},
    });
  }
};
// 修改单位
const onGenderChange = (ev) => {
  memberStore.RegisterObjViewing.wfUnit = ev.detail.value;
};
const handleSaveSure = async () => {
  try {
    memberStore.boleanDisabled = true;
    if (!memberStore.RegisterObjViewing.wfTypeName) {
      return uni.showToast({
        icon: "none",
        title: "危废行业俗称不能为空",
      });
    }
    // if (!memberStore.RegisterObjViewing.wfName) {
    //   return uni.showToast({
    //     icon: "none",
    //     title: "危险废物名称不能为空",
    //   });
    // }
    if (!memberStore.RegisterObjViewing.produceTime) {
      return uni.showToast({
        icon: "none",
        title: "产生时间不能为空",
      });
    }
    if (!memberStore.RegisterObjViewing.wfContainerType) {
      return uni.showToast({
        icon: "none",
        title: "包装类型不能为空",
      });
    }
    if (!memberStore.RegisterObjViewing.wfContainerCount) {
      return uni.showToast({
        icon: "none",
        title: "包装数量不能为空",
      });
    }
    if (!memberStore.RegisterObjViewing.wfTo) {
      return uni.showToast({
        icon: "none",
        title: "去向不能为空",
      });
    }
    memberStore.RegisterObjViewing.wfPicture = JSON.stringify(
      picturesPath.value
    );
    await wfRegisterUpdate(memberStore.RegisterObjViewing);
    uni.showToast({ icon: "success", title: "编辑成功" });
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 400);
  } finally {
    memberStore.boleanDisabled = false;
  }
};
</script>

<style lang="scss" scoped>
// 表单
.form {
  background-color: #f4f4f4;
  .form-content {
    max-height: 86vh;
    overflow-y: auto;
  }
  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      // width: 180rpx;
      white-space: nowrap;
      padding-right: 5rpx;
      color: #333;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }
    .placeholder {
      color: #808080;
    }
  }

  &-button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 20rpx;
    font-size: 30rpx;
    background-color: rgb(0, 122, 255);
    padding: 0 20rpx;
  }
}
</style>
